<template>
	<yd-layout id='articleCompany' class=''>
		<div class="header_f" :slot='openNavListFlg?"":"top"'>
			<div class="header_f_c" ref='navListFRef'>
				<div class="header">
					<div class="header_list_f" v-for="item,index in cateList" ref='navListRef'>
						<div @click="navClick(item,index)" :class="activeNum==index?'active_list':''" class="header_list">{{item.title}}</div>
					</div>
				</div>

			</div>
			<div class="header_img_down_f">
				<img @click="openNavListFlg=true" class="header_img_down" src="../../assets/product_down.png" alt="" />
			</div>
		</div>
		<div class="content">
			<yd-infinitescroll :callback="getArticleLst" ref="infinitescrollDemo">
				<ArticleList :articleTime='false' slot="list" :dataList='dataList'></ArticleList>
				<!-- 数据全部加载完毕显示 -->
				<span slot="doneTip">没有更多数据了~~</span>

				<!-- 加载中提示，不指定，将显示默认加载中图标 -->
				<!--<img slot="loadingTip" src="path/img/loading.svg"/>-->
			</yd-infinitescroll>
			<NoList v-show='dataList.length==0'>
				<img slot='img' src="../../assets/kong_3.png" alt="" />
			</NoList>
		</div>
		<div class="show_nav_list_f" v-show="openNavListFlg">
			<div class="show_nav_list">
				<div @click="navClick(item,index,true)" :class="activeNum==index?'active_list':''" class="header_list" v-for="item,index in cateList">{{item.title}}</div>
			</div>
			<img @click="openNavListFlg=false" class="show_nav_list_img_down" src="../../assets/product_down.png" alt="" />
		</div>
		<yd-backtop></yd-backtop>
	</yd-layout>
</template>

<script>
	import ArticleList from '../../components/ArticleList/ArticleList.vue'
	import { Popup } from 'vue-ydui/dist/lib.rem/popup';
	import { InfiniteScroll } from 'vue-ydui/dist/lib.rem/infinitescroll';
	import { BackTop } from 'vue-ydui/dist/lib.rem/backtop';
	export default {
		components: {
			[ArticleList.name]: ArticleList,
			[InfiniteScroll.name]: InfiniteScroll,
			[BackTop.name]: BackTop,
			[Popup.name]: Popup,
		},
		data() {
			return {
				activeNum: 0,
				ListWidth:0,
				openNavListFlg: false,
				dataList: [],
				cateList: [],
				pageNum: 1,
				cateId:0,
				pageCount: 10,
				openNavListFlg:false
			}
		},
		created() {},
		watch: {

		},
		computed: {

		},
		mounted() {

			if(this.$route.query.port == 'newest') {
				document.title = '最新发布'
			} else if(this.$route.query.port == 'hotest') {
				document.title = '新闻资讯'
			} else {
				document.title = '行业知识'
				if(this.$route.query.cate_id == 1) {
					document.title = '聚焦公司'
				}
			}
			//			this.getArticleLst()
			this.getCates();
		},
		methods: {
			navClick(item, index, flg) {
				if(flg) {
					this.openNavListFlg = false
				}
				
				this.$nextTick(() => {
					if(this.cateList.length > 2) {
						this.$nextTick(() => {
							this.ListWidth = this.$refs.navListRef[1].offsetWidth
							this.$refs.navListFRef.scrollLeft = (index * this.ListWidth)
						})
					} 
				})

				this.activeNum = index;
				this.cateId = item.id
				this.pageNum = 1;
				this.pageCount = 10;
				this.dataList = []
				this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.reInit');
				this.getArticleLst()
			},
			
			getCates() {
				this.$root.ajax({
					name: 'article/cates',
					type: 'get',
					closeloadingClose: true,
					params: {
						pid: 1,
					}
				}).then((d) => {
					d.data.unshift({
						id: 0,
						title: "全部"
					})
					this.cateList = d.data
					if(this.cateList.length > 0) {
						this.cateId = this.cateList[0].id
						this.getArticleLst(true)
					} else {
						this.$dialog.loading.close();
					}

				})
			},
			getArticleLst() {
				let params = {
					page: this.pageNum,
					count: this.pageCount,
				};
				let name = '';
				if(this.$route.query.port == 'newest') {
					name = 'article/newest'
				} else if(this.$route.query.port == 'hotest') {
					name = 'article/hotest'
				} else {
					name = 'article/lst'
					params.cate_id = this.cateId
				}
				this.$root.ajax({
					name: name,
					type: 'get',
					params: params
				}).then((d) => {
					for(let a = 0; a < d.data.article_list.length; a++) {
						d.data.article_list[a].newTime = this.$root.getDate(new Date(d.data.article_list[a].create_time * 1000))
					}
					this.dataList = [...this.dataList, ...d.data.article_list];
					if(this.dataList.length >= d.data.article_total) {
						/* 所有数据加载完毕 */
						this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.loadedDone');
						return;
					}

					/* 单次请求数据完毕 */
					this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.finishLoad');

					this.pageNum++;
				})
			}
		}
	}
</script>

<style lang="scss">
	@import './articleCompany.scss';
</style>